<template>
	<view>
		<view
			class="heda-bg h-176"
			:style="{
				'background': `url(${getImg('appointment-bg')}) no-repeat`,
			}"
		>
			<head-nav 
				title="预约确认" 
				bgColor="transparent" 
				titColor="#FFFFFF" 
				iconC="#FFFFFF"
			></head-nav>
		</view>
		<view class="padlr24 ">
			<view class="head-time-txt pad-t48">
				14:00～15:30
			</view>
			<view class="head-week-txt ">
				2024-10-20 周日 下午
			</view>
			<view class="block-box mar-t48  ">
				<view class="block-tit pos-rel pad-l20">
					预约员工
				</view>
				<view class="mar-t20 flex-a staff-name">
					<u--image
						:showLoading="true" 
						:src="getImg('swiper-img')" 
						width="96rpx"
						height="96rpx"
						radius="16rpx"
					></u--image>
					<view class="pad-l20">
						陈雅馨
					</view>
				</view>
			</view>
			<view class="block-box mar-t32  ">
				<view class="block-tit pos-rel pad-l20">
					预约项目
				</view>
				<view class="mar-t20 flex-a project-list">
					<view class="project-li flex-center">
						瓷肌美白 通透亮肤
					</view>
				</view>
			</view>
			<view class="block-box mar-t46  ">
				<view class="block-tit pos-rel pad-l20">
					门店地址
				</view>
				<view class="mar-t20  address-box">
					<view class="addres-store ">
						<view class="flex-a ju-bt">
							<view class="">
								爱美丽美容
							</view>
							<view class="flex-a">
								<u--image
									:showLoading="true" 
									:src="getImg('location-icon')" 
									width="40rpx"
									height="40rpx"
								></u--image>
								<text>据您1.3km</text>
							</view>
						</view>
						<view class="mar-t10">
							浙江省温州市乐清市柳市镇翔来南路15号梅林花园15栋
						</view>
					</view>
				</view>
			</view>
			<view class="block-box mar-t40  ">
				<view class="block-tit pos-rel pad-l20 flex-a ju-bt">
					<text>上门地址</text>
					<view class="Tolls-txt">
						路费：¥10
					</view>
				</view>
				<view class="mar-t20 address-box flex-a ju-bt" @click="onSelectAddress">
					<view>
						浙江省温州市乐清市柳市镇108号
					</view>
					<u--image
						:showLoading="true" 
						:src="getImg('arrow-right')" 
						width="16rpx"
						height="24rpx"
					></u--image>
					
				</view>
			</view>
			<view class="block-box mar-t46  ">
				<view class="block-tit pos-rel pad-l20">
					备注
				</view>
				<view class="remark-box mar-t20 pad16">
					<u--textarea 
						v-model="remarkVal" 
						placeholder="您有任何特殊要求都可以告诉我们"
						height="360rpx"
						border="none"
						maxlength="-1"
					></u--textarea>
				</view>
			</view>
			<view class="fot-boxx pad-b88 mar-t40">
				<view class="fot-btn  flex-center" @click="onRouter">
					提交预约
				</view>
			</view>
			
		</view>
		<addressShow ref="addressShowRef"></addressShow>
	</view>
</template>

<script>
	import addressShow from "../components/selectAddress.vue"
	export default {
		components: {
			addressShow
		},
		data() {
			return {
				remarkVal: "",
			}
		},
		onLoad() {
			
		},
		methods: {
			onSelectAddress() {
				this.$refs.addressShowRef.selectAddressShow = true
			},
			onRouter() {
				this.$goRouter('/pages/subscribe/pages/submitOrder')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fot-btn {
		height: 88rpx;
		background: #FF7171;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	/deep/ .u-textarea {
		padding: 0;
		background-color: #F5F5F5 !important;
	}
	.block-box {
		.remark-box {
			height: 392rpx;
			background: #F5F5F5;
			border-radius: 16rpx;
		}
		.Tolls-txt {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}
		.address-box {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}
		.project-list {
			.project-li {
				width: 282rpx;
				height: 60rpx;
				border-radius: 40rpx ;
				border: 2rpx solid;
				border: linear-gradient(135deg, rgba(255, 99, 174, 1), rgba(255, 113, 113, 1)) 2 2;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FF7171;
			}
		}
		.staff-name {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #444444;
		}
		.block-tit {
			&::after {
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				content: "";
				position: absolute;
				width: 10rpx;
				height: 32rpx;
				background: linear-gradient( 135deg, #FF63AE 0%, #FF7171 100%);
			}
		}
	}
	.head-time-txt {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 48rpx;
		color: #111111;
	}
	.head-week-txt {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
	}
</style>
<style>
	page {
		background: #fff;
	}
</style>
